import { useEffect } from 'react'
import { Badge, Table, TableColumnsType } from 'antd'
import { useNavigate } from 'react-router-dom'

const HomePage: React.FC = () => {
  useEffect(() => {
    console.log('环境', import.meta.env)
    // TestController.testApi();
  }, [])

  const expandedRowRender = () => {
    const columns: TableColumnsType<any> = [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Name', dataIndex: 'name', key: 'name' },
      {
        title: 'Status',
        key: 'state',
        render: () => <Badge status="success" text="Finished" />
      },
      { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: () => {
          return 'xxxx'
        }
      }
    ]

    const data = []
    for (let i = 0; i < 3; ++i) {
      data.push({
        key: i.toString(),
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        upgradeNum: 'Upgraded: 56'
      })
    }
    return <Table columns={columns} dataSource={data} pagination={false} />
  }

  const nav = useNavigate()

  const columns: TableColumnsType<any> = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Platform', dataIndex: 'platform', key: 'platform' },
    { title: 'Version', dataIndex: 'version', key: 'version' },
    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
    {
      title: 'Action',
      key: 'operation',
      render: () => <a onClick={() => nav(`/test/test/${123}`)}>Publish</a>
    }
  ]

  const data = []
  for (let i = 0; i < 100; ++i) {
    data.push({
      key: i.toString(),
      name: 'Screen',
      platform: 'iOS',
      version: '10.3.4.5654',
      upgradeNum: 500,
      creator: 'Jack',
      createdAt: '2014-12-24 23:12:00'
    })
  }

  return (
    <>
      <Table
        columns={columns}
        expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
        dataSource={data}
        rowSelection={{
          type: 'checkbox'
          // ...rowSelection,
        }}
      />
    </>
  )
}

export default HomePage
